<template>
    <div class="flex-1 login-bg">
        <div
            class="fixed -translate-y-1/2 top-1/2 right-[160px] w-[540px] h-[670px] px-[45px] box-border py-[50px] bg-white bg-opacity-75 rounded-[40px] flex flex-col transition-opacity"
        >
            <div class="flex flex-col mb-[25px]">
                <span class="font-medium text-[55px]">你好</span>
                <span>欢迎使用<span class="ml-2 text-main-green">青博管理平台</span></span>
            </div>
            <div class="relative flex-1 overflow-hidden">
                <el-form
                    ref="loginFormRef"
                    :model="formData"
                    label-position="top"
                    hide-required-asterisk
                    class="absolute w-full transition-transform"
                >
                    <el-form-item label="账号" :rules="rules.username" prop="username">
                        <el-input
                            class="input-box"
                            v-model="formData.username"
                            placeholder="请输入账号信息（用户名/手机号）"
                        />
                    </el-form-item>
                    <el-form-item label="密码" :rules="rules.password" prop="password">
                        <el-input
                            class="input-box"
                            v-model="formData.password"
                            placeholder="请输入密码"
                            type="password"
                            show-password
                        />
                    </el-form-item>
                    <div class="flex items-center justify-between">
                        <el-checkbox v-model="isRemember">记住密码</el-checkbox>
                    </div>
                    <div class="flex justify-end mt-[60px]">
                        <el-button class="w-60 h-14 rounded-[10px]" type="primary" @click="submitForm">登录</el-button>
                    </div>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { getMyDetail, login } from '@/apis/system'
import { onMounted, reactive, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { type FormInstance } from 'element-plus'
import { rememberPwd, getRemember, clearRemember, setToken, setUserInfo, getUserInfo } from '@/utils/store'
const route = useRoute()
const router = useRouter()
// 登录表单
const loginFormRef = ref<FormInstance>()
const formData = reactive<LoginForm>({
    username: '',
    password: ''
})

// 输入校验
const rules = {
    username: [
        {
            required: true,
            message: '账号不能为空',
            trigger: 'blur'
        }
    ],
    password: [
        {
            required: true,
            message: '密码不能为空',
            trigger: 'blur'
        }
    ]
}

// 是否记住密码
const isRemember = ref(!!getRemember())

watch(
    () => isRemember.value,
    () => {
        if (isRemember.value) {
        } else {
            clearRemember()
        }
    }
)

onMounted(() => {
    // 记住密码内容
    const rememberInfo = getRemember()
    formData.username = rememberInfo?.username || ''
    formData.password = rememberInfo?.password || ''
})
// 登录表单提交
const submitForm = async () => {
    loginFormRef.value?.validate(async (valid) => {
        if (valid) {
            const res = await login(formData)
            console.log(res)

            setToken(res)
            if (isRemember.value) {
                rememberPwd(formData.username, formData.password)
            }
            const userInfo = await getMyDetail()
            setUserInfo(userInfo)
            jump()
        }
    })
}
const jump = () => {
    router.replace({ path: '/goods/list' })
}
</script>

<style scoped>
/* 图片已转为渐进模式，会自动模糊加载。 */
.login-bg {
    background: url('../assets/bg-login.jpeg') no-repeat;
    background-size: cover;
    background-position: 50% 50%;
}

.active-line {
    transition: left 0.36s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.input-box {
    @apply h-14 rounded-lg;
}

:deep(.el-form-item__label) {
    @apply text-black text-lg !mb-[15px];
}
</style>
